<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=0">
    <title>有声照片debug2</title>
    <style>
        html, body {
            scroll-behavior:smooth;
        }
        body{
            margin: 0 auto;
        }
        .maindiv{
            height: 100vh;
            width: 100%;
            position: relative;
        }
        .bgimg{
            position:absolute;
            width: 100%;
            height: 100%;
            z-index:-1;
            filter:blur(32px);
        }
        .mainimg{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            max-width: 100%;
            max-height: 100%;
        }
        .titletext{
            position: absolute;
            left:0;
            bottom:0;
            background:rgba(0, 0, 0, 0.5);
            font-size: 6vw;
            color: #FFFFFF;
        }
        #tipsimg{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: auto;
            height: 75%;
        }
    </style>
</head>
<body>
    <audio id="au1" src="sick.mp3" preload="auto" loop="loop"></audio>
    <audio id="au2" src="alone.mp3" preload="auto" loop="loop"></audio>
    <audio id="au3" src="namo.mp3" preload="auto" loop="loop"></audio>
    <audio id="au4" src="ass.mp3" preload="auto" loop="loop"></audio>
    <audio id="au5" src="abing.mp3" preload="auto" loop="loop"></audio>
    <div class="maindiv">
        <img src="img0.jpg" class="bgimg" />
        <img src="img0.jpg" class="mainimg" />
        <img src="tips.png" id="tipsimg" />
        <p class="titletext">三院-我的曾经</p>
    </div>
    <div class="maindiv">
        <img src="img1.jpg" class="bgimg" />
        <img src="img1.jpg" class="mainimg" />
        <p class="titletext">忧愁的老薛</p>
    </div>
    <div class="maindiv">
        <img src="img2.png" class="bgimg" />
        <img src="img2.png" class="mainimg" />
        <p class="titletext">南无阿弥陀佛</p>
    </div>
    <div class="maindiv">
        <img src="img3.png" class="bgimg" />
        <img src="img3.png" class="mainimg" />
        <p class="titletext">光腚小翘臀</p>
    </div>
    <div class="maindiv">
        <img src="img4.jpg" class="bgimg" />
        <img src="img4.jpg" class="mainimg" />
        <p class="titletext">这种感觉你能懂吗？</p>
    </div>
    <script type="text/javascript">
    var targetY = 0;
    //页面高度的十分之一
    var one_sixth = (document.documentElement.scrollHeight || document.body.scrollHeight) / 10;
    var playingId = 0;
    let y1 = 0;
    let y2 = 0;
    let timer = null;
    //移除提示
    setTimeout(function(){
        document.getElementById("tipsimg").remove();
    },3000);
    //滚动事件
    window.addEventListener('scroll', function() {
        clearTimeout(timer);
        timer = setTimeout(isScrollEnd, 100);
        y1 = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    });
    //停止
    function isScrollEnd() {
        y2 = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        if(y2 == y1) {
            console.log('滚动结束了');
            
            if (one_sixth * 1 > y2) {
                targetY = 0;
                playmusic(1);
            } else if (one_sixth * 3 > y2) {
                targetY = one_sixth * 2;
                playmusic(2);
            } else if (one_sixth * 5 > y2) {
                targetY = one_sixth * 4;
                playmusic(3);
            } else if (one_sixth * 7 > y2) {
                targetY = one_sixth * 6;
                playmusic(4);
            } else {
                targetY = one_sixth * 8;
                playmusic(5);
            }
            
            window.scrollTo(0, targetY);
        }
    }
    //播放音乐方法
    function playmusic(index) {
        if (index != playingId) {
            playingId = index;
            document.getElementById("au1").pause();
            document.getElementById("au1").currentTime = 0;
            document.getElementById("au2").pause();
            document.getElementById("au2").currentTime = 0;
            document.getElementById("au3").pause();
            document.getElementById("au3").currentTime = 0;
            document.getElementById("au4").pause();
            document.getElementById("au4").currentTime = 0;
            document.getElementById("au5").pause();
            document.getElementById("au5").currentTime = 0;
            document.getElementById("au" + index).play();
        }
    }
    playmusic(1);
    </script>
</body>
</html>